﻿@page "/tabs/wizard"

@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Calendars
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.Buttons

@inherits SampleBaseComponent;

<SampleDescription>
    <p> This sample demonstrates simple train reservation wizard that Enable/Disable Tab items based on sequential validation of each Tab content.</p>
</SampleDescription>
<ActionDescription>
   <p>Tab items can be disabled dynamically by passing the index and boolean value to the <a target='_blank' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTab.html#Syncfusion_Blazor_Navigations_SfTab_EnableTab_System_Int32_System_Boolean_'>EnableTab</a> method.</p>
   <p>You can design wizard like sample with Tab using the in-built API and customizing the content with proper validations.</p>
   <p>More information about Tab can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/tab/getting-started/'> documentation </a> section.</p>
</ActionDescription>

<div class="control-section e-tab-section">
    <SfTab @ref="Tab" CssClass="BlazorTab" Height="390" LoadOn="ContentLoad.Demand">
        <TabEvents Created="TabCreate"></TabEvents>
        <TabItems>
            <TabItem>
                <ChildContent>
                    <TabHeader Text="New Booking"></TabHeader>
                </ChildContent>
                <ContentTemplate>
                    <div id="booking">
                        <div class="wizard-title">Plan your journey</div>
                        <div class="responsive-align">
                            <div class="row">
                                <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6 search-item">
                                    <SfDropDownList TValue="string" TItem="CitiesFields" @ref="StartPoint" Width="100%" DataSource="@CitiesData" Placeholder="From">
                                        <DropDownListFieldSettings Text="Name" Value="Name"></DropDownListFieldSettings>
                                    </SfDropDownList>
                                </div>
                                <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6 search-item">
                                    <SfDropDownList @ref="EndPoint" TValue="string" TItem="CitiesFields" Width="100%" DataSource="@CitiesData" Placeholder="To">
                                        <DropDownListFieldSettings Text="Name" Value="Name"></DropDownListFieldSettings>
                                    </SfDropDownList>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6 search-item">
                                    <SfDatePicker @ref="Date" Width="100%" Placeholder="Journey Date" FloatLabelType="FloatLabelType.Auto" TValue="DateTime?" Value="@(DateTime.Now)" Min="@((DateTime.Now).AddDays(-1))" Max="@(DateTime.Now.AddMonths(3))"></SfDatePicker>
                                </div>
                                <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6 search-item">
                                    <SfDropDownList @ref="Quota" TValue="string" TItem="DropdownFields" FloatLabelType="FloatLabelType.Auto" DataSource="@QuotaList" Index="1" Placeholder="Ticket type">
                                        <DropDownListFieldSettings Text="Text" Value="Text"></DropDownListFieldSettings>
                                    </SfDropDownList>
                                </div>
                            </div>
                            <div class="btn-container">
                                <SfButton @onclick="SearchButtonClick">Search Train</SfButton>
                            </div>
                            @if (EmptyField)
                            {
                                <span class="error">* Please fill all the details before proceeding</span>
                            }
                            @if (SameField)
                            {
                                <span class="error">* Arrival point can't be same as Departure</span>
                            }
                        </div>
                    </div>
                </ContentTemplate>
            </TabItem>
            <TabItem>
                <ChildContent>
                    <TabHeader Text="Train List"></TabHeader>
                </ChildContent>
                <ContentTemplate>
                    <div id="selectTrain">
                        <div class="wizard-title">Select the train from the list </div>
                        <SfGrid Width="100%" TValue="GridFields" DataSource="@GridData">
                            <GridEvents RowSelected="SelectedTrainDetails" TValue="GridFields"></GridEvents>
                            <GridColumns>
                                <GridColumn Field=@nameof(GridFields.TrainNo) HeaderText="Train No" Width="120" Type="@ColumnType.Number"></GridColumn>
                                <GridColumn Field=@nameof(GridFields.Name) Width="140"></GridColumn>
                                <GridColumn Field=@nameof(GridFields.Departure) HeaderText="Departure" Width="120"></GridColumn>
                                <GridColumn Field=@nameof(GridFields.Arrival) HeaderText="Arrival" Width="140"></GridColumn>
                                <GridColumn Field=@nameof(GridFields.Availability) HeaderText="Availability" Width="140" Type="@ColumnType.Number"></GridColumn>
                            </GridColumns>
                        </SfGrid>
                        <br />
                        <div class="btn-container">
                            <SfButton @onclick="@SelectTrainBack">Back</SfButton>
                            <SfButton @onclick="@SelectTrainContinue">Continue</SfButton>
                        </div>
                        @if (EmptyField)
                        {
                            <span class="error">* Select your convenient train</span>
                        }
                    </div>
                </ContentTemplate>
            </TabItem>
            <TabItem>
                <ChildContent>
                    <TabHeader Text="Add Passenger"></TabHeader>
                </ChildContent>
                <ContentTemplate>
                    <div id="details">
                        <div class="details-page wizard-title">Enter the passenger details</div>
                        <div id="PassengersList">
                            <table id="passenger-table">
                                <colgroup>
                                    <col />
                                    <col />
                                    <col />
                                    <col />
                                    <col />
                                    <col />
                                </colgroup>
                                <thead>
                                    <tr>
                                        <th class="name-header">Name</th>
                                        <th class="age-header">Age</th>
                                        <th class="gender-header">Gender</th>
                                        <th class="type-header">Berth Preference</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            <SfTextBox @ref="@FirstPassengerName" Placeholder="Passenger Name"></SfTextBox>
                                        </td>
                                        <td>
                                            <SfNumericTextBox Min="1" Max="100" Value="18" Format=n0 ShowSpinButton="false"></SfNumericTextBox>
                                        </td>
                                        <td>
                                            <SfDropDownList @ref="FirstPassengerGender" TValue="string" TItem="DropdownFields" Text="Male" DataSource="@Gender">
                                                <DropDownListFieldSettings Text="Text" Value="Text"></DropDownListFieldSettings>
                                            </SfDropDownList>
                                        </td>
                                        <td>
                                            <SfDropDownList @ref="FirstPassengerBerth" TValue="string" TItem="DropdownFields" Placeholder="Optional" DataSource="@Berth">
                                                <DropDownListFieldSettings Text="Text" Value="Text"></DropDownListFieldSettings>
                                            </SfDropDownList>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <SfTextBox @ref="@SecondPassengerName" Placeholder="Passenger Name"></SfTextBox>
                                        </td>
                                        <td>
                                            <SfNumericTextBox Min="1" Max="100" Value="18" Format=n0 ShowSpinButton="false"></SfNumericTextBox>
                                        </td>
                                        <td>
                                            <SfDropDownList @ref="SecondPassengerGender" TValue="string" TItem="DropdownFields" Text="Male" DataSource="@Gender">
                                                <DropDownListFieldSettings Text="Text" Value="Text"></DropDownListFieldSettings>
                                            </SfDropDownList>
                                        </td>
                                        <td>
                                            <SfDropDownList @ref="SecondPassengerBerth" TValue="string" TItem="DropdownFields" Placeholder="Optional" DataSource="@Berth">
                                                <DropDownListFieldSettings Text="Text" Value="Text"></DropDownListFieldSettings>
                                            </SfDropDownList>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <SfTextBox @ref="@ThirdPassengerName" Placeholder="Passenger Name"></SfTextBox>
                                        </td>
                                        <td>
                                            <SfNumericTextBox Min="1" Max="100" Value="18" Format=n0 ShowSpinButton="false"></SfNumericTextBox>
                                        </td>
                                        <td>
                                            <SfDropDownList @ref="ThirdPassengerGender" TValue="string" TItem="DropdownFields" Text="Male" DataSource="@Gender">
                                                <DropDownListFieldSettings Text="Text" Value="Text"></DropDownListFieldSettings>
                                            </SfDropDownList>
                                        </td>
                                        <td>
                                            <SfDropDownList @ref="ThirdPassengerBerth" TValue="string" TItem="DropdownFields" Placeholder="Optional" DataSource="@Berth">
                                                <DropDownListFieldSettings Text="Text" Value="Text"></DropDownListFieldSettings>
                                            </SfDropDownList>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <br />
                        <div class="btn-container">
                            <SfButton @onclick="@PassengerListBack">Back</SfButton>
                            <SfButton @onclick="@PassengerListContinue">Continue</SfButton>
                        </div>
                        @if (EmptyField)
                        {
                            <span class="error">* Please enter passenger details</span>
                        }
                    </div>
                </ContentTemplate>
            </TabItem>
            <TabItem>
                <ChildContent>
                    <TabHeader Text="Make Payment"></TabHeader>
                </ChildContent>
                <ContentTemplate>
                    <div id="confirm">
                        <div class="tab-title1 wizard-title">Confirm the details and proceed</div>
                        <SfGrid Width="100%" TValue="PassengerFields" DataSource="@PassengerData">
                            <GridColumns>
                                <GridColumn Field=@nameof(PassengerFields.TrainNo) HeaderText="Train No" Width="120" Type="@ColumnType.Number"></GridColumn>
                                <GridColumn Field=@nameof(PassengerFields.Name) HeaderText="Name" Width="140"></GridColumn>
                                <GridColumn Field=@nameof(PassengerFields.Gender) HeaderText="Gender" Width="120"></GridColumn>
                                <GridColumn Field=@nameof(PassengerFields.Berth) Width="140" Type="@ColumnType.Number"></GridColumn>
                            </GridColumns>
                        </SfGrid>
                        <br />
                        <div id="amount">Total payable amount: $1700</div>
                        <br />
                        <div class="btn-container">
                            <SfButton @onclick="@ConfirmBack">Back</SfButton>
                            <SfButton @onclick="@ConfirmPayment">Pay</SfButton>
                        </div>
                    </div>
                </ContentTemplate>
            </TabItem>
        </TabItems>
    </SfTab>
    <div>
        <SfDialog @ref="AlertDialog" Width=250 Target=".BlazorTab" IsModal=true Visible=false ShowCloseIcon="true">
            <DialogEvents Created="DialogCreate"></DialogEvents>
            <DialogTemplates>
                <Header><div>Success</div></Header>
                <Content><div>Your payment successfully processed</div></Content>
            </DialogTemplates>
            <DialogButtons>
                <DialogButton OnClick="@OnSubmit" Content="OK" IsPrimary="true"></DialogButton>
            </DialogButtons>
        </SfDialog>
    </div>
</div>

@code{
    SfTab Tab;
    public SfDropDownList<string, CitiesFields> StartPoint;
    public SfDropDownList<string, CitiesFields> EndPoint;
    public SfDropDownList<string, DropdownFields> Quota;
    public int SelectedTrain { get; set; }
    public Boolean IsSelectedTrain { get; set; } = false;
    SfDialog AlertDialog;
    SfDatePicker<DateTime?> Date;
    SfTextBox FirstPassengerName;
    SfTextBox SecondPassengerName;
    SfTextBox ThirdPassengerName;
    public SfDropDownList<string, DropdownFields> FirstPassengerGender;
    public SfDropDownList<string, DropdownFields> SecondPassengerGender;
    public SfDropDownList<string, DropdownFields> ThirdPassengerGender;
    public SfDropDownList<string, DropdownFields> FirstPassengerBerth;
    public SfDropDownList<string, DropdownFields> SecondPassengerBerth;
    public SfDropDownList<string, DropdownFields> ThirdPassengerBerth;
    public bool EmptyField { get; set; } = false;
    public bool SameField { get; set; } = false;
    public List<PassengerFields> PassengerData;

    public class CitiesFields
    {
        public string Name { get; set; }
        public int Fare { get; set; }
    }


    public List<CitiesFields> CitiesData = new List<CitiesFields>()
{
        new CitiesFields() { Name = "Chicago", Fare = 300 },
        new CitiesFields() { Name = "San Francisco", Fare = 125 },
        new CitiesFields() { Name = "Los Angeles", Fare = 175 },
        new CitiesFields() { Name = "Seattle", Fare = 250 },
        new CitiesFields() { Name = "Florida", Fare = 150 }
    };

    public class DropdownFields
    {
        public string ID { get; set; }
        public string Text { get; set; }
    }

    public List<DropdownFields> QuotaList = new List<DropdownFields>()
{
        new DropdownFields { ID = "1", Text = "Business Class" },
        new DropdownFields { ID = "2", Text = "Economy Class" },
        new DropdownFields { ID = "3", Text = "Common Class" }
    };

    public async Task SearchButtonClick()
    {
        if ((StartPoint.Value == null) || (EndPoint.Value == null) || (Quota.Value == null))
        {
            EmptyField = true;
        }
        else if (StartPoint.Value == EndPoint.Value)
        {
            SameField = true;
        }
        else
        {
            EmptyField = false;
            SameField = false;
            GridData = new List<GridFields>() {
                new GridFields
                {
                    TrainNo = 1000,
                    Name = "Train" + "1",
                    Departure = StartPoint.Value,
                    Arrival = EndPoint.Value,
                    Availability = 30
                },
                new GridFields
                {
                    TrainNo = 1002,
                    Name = "Train" + "2",
                    Departure = StartPoint.Value,
                    Arrival = EndPoint.Value,
                    Availability = 28
                }
            };

            await Tab.EnableTabAsync(1, true);
            await Tab.EnableTabAsync(2, false);
            await Tab.EnableTabAsync(3, false);
            await Tab.SelectAsync(1);
            StateHasChanged();
        }
    }

    public void SelectedTrainDetails(RowSelectEventArgs<GridFields> args)
    {
        IsSelectedTrain = true;
        if (IsSelectedTrain)
        {
            EmptyField = false;
            SelectedTrain = args.Data.TrainNo;
        }
        else
        {
            EmptyField = true;
        }
    }

    public class GridFields
    {
        public int TrainNo { get; set; }
        public string Name { get; set; }
        public string Departure { get; set; }
        public string Arrival { get; set; }
        public int Availability { get; set; }
    }

    public class PassengerFields
    {
        public int TrainNo { get; set; }
        public string Name { get; set; }
        public string Gender { get; set; }
        public string Berth { get; set; }
    }

    public List<GridFields> GridData;

    public List<DropdownFields> Gender = new List<DropdownFields>() {
        new DropdownFields { ID = "1", Text = "Male" },
        new DropdownFields { ID = "2", Text = "Female" }
    };

    public List<DropdownFields> Berth = new List<DropdownFields>()
{
        new DropdownFields { ID = "1", Text = "Upper" },
        new DropdownFields { ID = "2", Text = "Lower" },
        new DropdownFields { ID = "2", Text = "Middle" },
        new DropdownFields { ID = "2", Text = "Window" },
        new DropdownFields { ID = "2", Text = "Aisle" }
    };
    public void TabCreate()
    {
        Tab.EnableTab(1, false);
        Tab.EnableTab(2, false);
        Tab.EnableTab(3, false);
    }
    public void SelectTrainBack()
    {
        Tab.Select(0);
    }
    public void SelectTrainContinue()
    {
        if (IsSelectedTrain)
        {
            EmptyField = false;
            Tab.EnableTab(2, true);
            Tab.Select(2);
        }
        else
        {
            Tab.EnableTab(2, false);
            EmptyField = true;
        }
    }

    public void PassengerListBack()
    {
        Tab.Select(1);
    }

    public void PassengerListContinue()
    {
        if (FirstPassengerName.Value == null)
        {
            EmptyField = true;
        }
        else
        {
            EmptyField = false;
            Tab.EnableTab(3, true);
            Tab.Select(3);
            PassengerData = new List<PassengerFields>();
            if(FirstPassengerName.Value != null)
            {
                PassengerData.Add (new PassengerFields {
                    TrainNo = SelectedTrain,
                    Name = FirstPassengerName.Value,
                    Gender = FirstPassengerGender.Value,
                    Berth = FirstPassengerBerth.Value
                });
            }
            if(SecondPassengerName.Value != null)
            {
                PassengerData.Add (new PassengerFields
                {
                    TrainNo = SelectedTrain,
                    Name = SecondPassengerName.Value,
                    Gender = SecondPassengerGender.Value,
                    Berth = SecondPassengerBerth.Value
                });
            }
            if(ThirdPassengerName.Value != null)
            {
                PassengerData.Add(new PassengerFields
                {
                    TrainNo = SelectedTrain,
                    Name = ThirdPassengerName.Value,
                    Gender = ThirdPassengerGender.Value,
                    Berth = ThirdPassengerBerth.Value
                });
            }
        }
    }

    public void ConfirmBack()
    {
        Tab.Select(2);
    }
    public void ConfirmPayment()
    {
        AlertDialog.Show();
        StateHasChanged();
    }
    public void DialogCreate()
    {
        AlertDialog.Hide();
    }
    public void OnSubmit(Object args)
    {

        AlertDialog.Hide();
        Tab.EnableTab(0, true);
        Tab.EnableTab(1, false);
        Tab.EnableTab(2, false);
        Tab.EnableTab(3, false);
        Tab.Select(0);
    }
}

<style>
    .wizard-title {
        font-size: 15px;
        padding: 7px;
    }

    .responsive-align {
        width: 75%;
        margin: 0 auto;
    }

    .error {
        color: red;
    }

    .search-item {
        padding-right: 50px;
        padding-bottom: 20px;
    }
    
    .btn-container {
        padding-bottom: 15px;
    }
    #amount {
        text-align: right;
        font-size: 15px;
        padding: 15px 0px;
    }

    #passenger-table th {
        text-align: center;
        font-size: 14px;
        font-weight: 400;
        border: 1px solid gainsboro;
    }

    #passenger-table td, th {
        padding: 10px;
    }

    #passenger-table td {
        border: 1px solid gainsboro;
    }
</style>